<template>
	<view id="page">
		<nav-bar :vuiData="navbar"></nav-bar>
		<!-- 搜索条 -->
		<view class='section search clearfloat'>
			<view class="input clearfloat">
			  <input type='text' focus="true" @input="getKeywords" placeholder='请输入关键字'></input><label @click="search"><image src='../../static/25.png' mode="widthFix" lazy-load="true"></image></label>
			</view>
		</view>
		<!-- <pic-txt :lists="lists" v-if="hasRes"></pic-txt>
		<view class="nocont" v-else>暂无内容</view> -->
		<view class="nomore" v-if="isLoad"><image src='../../static/nomore_img.png' mode="widthFix"></image><text>没有更多了~</text></view>
	</view>
</template>

<script>
	// import PicTxt from '../../components/pictxt/index.vue'
	import app from '../../common/index.js'
	export default {
		name: 'search',
		data() {
			return {
				navH: null,
				navbar: { // vui-navbar
					isBack: true, // 是否显示返回
					title: 'search', // 页面标题
				},
				keys: '',
				hasRes: true,
				isLoad: false,
				page: 1,
				size: 10,
				lists: [],
			}
		},
		onLoad() {
			this.navH = this.$store.state.navHeight;
		},
		components: {
			// PicTxt,
		},
		methods: {
			/**
			 * @des 获取搜索关键词
			 */
			getKeywords(e) {
				let val = e.detail.value;
				this.keys = val;
			},
			/**
			 * @des 搜索
			 */
			search(e) {
				var keys = this.keys;
				if(keys) {
				  this.lists = [];
				  this.getPicTxt();
				}else {
				  uni.showToast({
					title: '请输入关键字',
				  })
				}
			},
			/**
			 * @des 获取图文列表
			 */
			getPicTxt() {
				app.request({
					url: 'entry/wxapp/Search',
					data: {
						keywords: this.keys,
						page: this.page,
						pagesize: this.size,
					}
				}, (ret) => {
					console.log(ret.data);
					let d = ret.data, tmpData = this.lists, len = d.data.length;
					if (d.total > 0) {
						this.hasRes = true;
						this.lists = tmpData.concat(d.data);
						this.isLoad = len < this.size ? true : false;
					} else {
						this.hasRes = false;
					}
				})
			},
		}
	}
</script>

<style>
	/* search */
	.animation {display: block!important;}
	.search {width: 100%; height: 110upx; padding: 25upx 30upx;}
	.search .city {text-align: left;}
	.search .city image {width: 50upx; padding-left: 20upx;}
	.search .hover {height: 70upx; padding-left: 30upx; box-shadow: 0 2rpx 4rpx #eee; border-radius: 60rpx; vertical-align: middle; background-color: #fff; text-align: left;}
	.search .hover icon {width: 50upx; height: 38upx; vertical-align: middle;}
	.search .hover text {color: #999999; line-height: 70upx; vertical-align: middle;}
	.search .input {position: absolute; left: 24rpx; right: 24rpx; height: 60rpx; box-shadow: 0 2rpx 4rpx #eee; border-radius: 60rpx; vertical-align: middle; background-color: #fff; text-align: left;}
	.search .input input {width: 70%; height: 60rpx; float: left; padding-left: 36rpx; line-height: 60rpx; font-size: 26rpx;}
	.search .input label {width: 30rpx; height: 60rpx; padding: 0 25rpx; border-radius: 0 60rpx 60rpx 0; float: right; line-height: 50rpx; background-color: #49d0c5; color: #fff;}
	@-webkit-keyframes searchAnimation{
	  0% {opacity: 1;}
	  100% {opacity: 0; display: block!important;}
	}
</style>
